<script setup>
import {defineEmits} from 'vue';
import {useHomeStore} from "@/stores/home";
const useStore = useHomeStore();
defineEmits(['handleMaskClick', 'handleMaskRightClick'])
</script>

<template>
  <div class="mask-layer transition" :class="{mask: useStore.isMask}" @click="$emit('handleMaskClick')" @contextmenu.stop.prevent="$emit('handleMaskRightClick')">
    <slot />
  </div>
</template>

<style lang="less" scoped>
.mask-layer {
  padding: .5rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &.mask {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, .15);
  }
}
</style>